<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<ul>
				<li v-for="item in hobbys" :key="item.id">
					{{item.id}}-{{item.name}}
				</li>
			</ul>
		</div>
		<!-- 
		 能够改变colors的方式，只有改变原数组的方法 push pop shift unshift splice sort reverse-->
		 <!-- 上述方法被VUE包装：https://v2.cn.vuejs.org/v2/guide/list.html#变更方法 -->
		 <!-- 除了被VUE包裹的数组方法外，还有Vue.set-->
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return {
					hobbys:[
						{id:1,name:'篮球'},
						{id:2,name:'打游戏'},
						{id:3,name:'睡觉'},
					],
					colors:['red','green','blue']
				}
			},
			methods:{
				
			}
		})
	</script>
</html>